<template>
  <div class="con">
    <section class="sec">
      <el-table
        :show-header="false"
        :data="accNull==1?tableData1:tableData"
        center
        border
        :cell-style="columnStyle"
        :span-method="arraySpanMethod"
        style="width: 100%; margin-top: 10px;"
      >
        <el-table-column width="180" prop="name" center />
        <el-table-column prop="amount1" />
      </el-table>
    </section>
    <!-- 附件 -->
    <el-table
      v-if="accNull==2"
      :data="seeDetails"
      border
      style="width: 100%"
      center
    >
      <el-table-column
        prop="id"
        label="序号"

      />
      <el-table-column
        prop="file_type"
        label="类型"

      />
      <el-table-column
        prop="file_name"
        label="名称"

      />
      <!-- <el-table-column
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <div class="btnBox">
      <el-button class="btn" type="primary" size="mini" @click="closed()">关闭</el-button>
    </div>

  </div>
</template>
<script>
import { deleteAccessory, seeAccessory, taskDetail } from '@/api/maintain'
export default {
  name: 'detail',
  // eslint-disable-next-line vue/require-prop-types
  props: ['accids'],
  data() {
    return {
    // 请求回来的数据
      dataForm: {},
      closeds: false,
      rowDetail: '',
      accNull: '',
      seeDetails: '',
      accidsWatch: ''
    }
  },
  computed: {
  // 因为数据用到了dataform中的数据，所以写在了computed中
    tableData() {
      return [
        {
          name: '任务编号',
          amount1: this.rowDetail.task_num
        },
        {
          name: '工作编号',
          amount1: this.rowDetail.work_num
        },
        {
          name: '站点',
          amount1: this.rowDetail.site_name
        },
        {
          name: '任务标题',
          amount1: this.rowDetail.task_title

        },
        {
          name: '任务内容',
          amount1: this.rowDetail.task_content

        },
        // {
        //   name: '开始时间',
        //   amount1: this.rowDetail.task_start

        // },
        // {
        //   name: '结束时间',
        //   amount1: this.rowDetail.task_end

        // },
        {
          name: '创建人11',
          amount1: this.rowDetail.user_name

        },
        {
          name: '创建时间',
          amount1: this.rowDetail.created_at

        },
        {
          name: '附件'
        }
      ]
    },
    tableData1() {
      return [
        {
          name: '任务编号',
          amount1: this.rowDetail.task_num
        },
        {
          name: '工作编号',
          amount1: this.rowDetail.work_num
        },
        {
          name: '站点',
          amount1: this.rowDetail.site_name
        },
        {
          name: '任务标题',
          amount1: this.rowDetail.task_title

        },
        {
          name: '任务内容',
          amount1: this.rowDetail.task_content

        },
        // {
        //   name: '开始时间',
        //   amount1: this.rowDetail.task_start

        // },
        // {
        //   name: '结束时间',
        //   amount1: this.rowDetail.task_end

        // },
        {
          name: '创建人',
          amount1: this.rowDetail.user_name

        },
        {
          name: '创建时间',
          amount1: this.rowDetail.created_at

        },
        {
          name: '无上传附件'
        }
      ]
    }
  },
  watch: {
    accids() {
      this.accidsWatch = this.accids
      this.handleClick()
      this.getDetail()
    }
  },
  created() {
    this.handleClick()
    this.getDetail()
  },
  methods: {
    // 详情
    getDetail() {
      const that = this
      taskDetail({ id: that.accids }).then(res => {
        that.rowDetail = res.data
      })
    },
    // 附件
    handleClick() {
      const that = this
      const data = {
        task_id: that.accids,
        offset: 0,
        limit: 50
      }
      seeAccessory(data).then(res => {
        console.log(22323232)
        if (res.code == 200) {
          this.seeDetails = res.data.files
          if (this.seeDetails.length == 0) {
            this.accNull = 1
          } else {
            this.accNull = 2
          }
          this.seeDetails.forEach(item => {
            if (item.file_type == 1) {
              item.file_type = '图片'
            } else {
              item.file_type = '文件'
            }
          })
        }
      })
    },
    // 删除附件
    handleDelete(a, b) {
      console.log(a)
      const that = this
      deleteAccessory({ id: b.id.toString() }).then(res => {
        that.handleClick()
      })
    },
    // 自定义列背景色
    columnStyle({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex == 0 || columnIndex == 1 || columnIndex == 3) {
      //   // 第三第四列的背景色就改变了2和3都是列数的下标
      //   return 'background:#f3f6fc;'
      // } else {
      //   return 'background:#ffffff;'
      // }
    },
    // 和并列
    arraySpanMethod({ row, column, rowIndex, columnIndex }) { // 把列合并为行
      if (rowIndex === 7 || rowIndex === 8) { //  首先筛选行数 0 ， 2 ，4
        if (columnIndex === 0) { // 当列数为0，开始，
          return [1, 2] // 把2列合并为一行
        }
      }
    },
    closed() {
      this.$emit('details', this.closeds)
    }
  }
}
</script>
<style lang="scss" scoped>
.sec{
  // position:relative
}
.btnBox{
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  margin-top: 20px;
  // border-top:1px solid #eee;
}
::v-deep.el-table .cell {
  text-align: center;
}
  // .btn{
  //   float: right;
  // }

</style>

